<template>
  <view class="search-container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-button" @click="goBack">
        <image class="back-icon" src="/static/back.png"></image>
      </view>
      <text class="page-title">筛选简历</text>
    </view>

    <!-- 搜索统计信息 -->
    <view class="search-stats" v-if="hasSelectedFilters">
      <text class="stats-text">已选择 {{ Object.keys(selectedFilters).length }} 个筛选条件</text>
    </view>

    <!-- 筛选条件卡片（简洁风格） -->
    <view class="filter-card">
      <view class="filter-grid">
        <view 
          class="filter-item" 
          :class="{ active: activeFilters.experience }"
          @click="toggleFilter('experience')"
        >
          <text class="filter-label">工作经验</text>
          <text class="filter-value">{{ getFilterValue('experience') || '不限' }}</text>
          <text class="arrow-icon">▼</text>
        </view>
        
        <view 
          class="filter-item" 
          :class="{ active: activeFilters.education }"
          @click="toggleFilter('education')"
        >
          <text class="filter-label">学历要求</text>
          <text class="filter-value">{{ getFilterValue('education') || '不限' }}</text>
          <text class="arrow-icon">▼</text>
        </view>

        <view 
          class="filter-item" 
          :class="{ active: activeFilters.schoolType }"
          @click="toggleFilter('schoolType')"
        >
          <text class="filter-label">学校类型</text>
          <text class="filter-value">{{ getFilterValue('schoolType') || '不限' }}</text>
          <text class="arrow-icon">▼</text>
        </view>

        <view 
          class="filter-item" 
          :class="{ active: activeFilters.salary }"
          @click="toggleFilter('salary')"
        >
          <text class="filter-label">薪资范围</text>
          <text class="filter-value">{{ getFilterValue('salary') || '不限' }}</text>
          <text class="arrow-icon">▼</text>
        </view>

        <view 
          class="filter-item" 
          :class="{ active: activeFilters.location }"
          @click="toggleFilter('location')"
        >
          <text class="filter-label">工作地点</text>
          <text class="filter-value">{{ getFilterValue('location') || '不限' }}</text>
          <text class="arrow-icon">▼</text>
        </view>
      </view>
    </view>

    



    <!-- 遮罩层 -->
    <view 
      class="filter-overlay" 
      :class="{ show: showFilterPanel }"
      v-if="showFilterPanel" 
      @click="closeFilterPanel"
    ></view>

    <!-- 筛选面板（弹窗） -->
    <view 
      class="filter-panel" 
      :class="{ 'filter-panel--show': showFilterPanel }"
    >
      <view class="filter-header">
        <text class="filter-title">{{ getFilterTitle(currentFilter) }}</text>
      </view>
      <view class="filter-close" @click="closeFilterPanel">
        <text class="close-icon">×</text>
      </view>

      <scroll-view class="filter-content" scroll-y>
        <view class="filter-options" v-if="currentFilter === 'experience'">
          <view 
            class="filter-option" 
            v-for="exp in experienceOptions" 
            :key="exp.value"
            :class="{ active: selectedExperience === exp.value }"
            @click="selectExperience(exp)"
          >
            <text class="option-text">{{ exp.label }}</text>
          </view>
        </view>

        <view class="filter-options" v-if="currentFilter === 'education'">
          <view 
            class="filter-option" 
            v-for="edu in educationOptions" 
            :key="edu.value"
            :class="{ active: selectedEducation === edu.value }"
            @click="selectEducation(edu)"
          >
            <text class="option-text">{{ edu.label }}</text>
          </view>
        </view>

        <view class="filter-options" v-if="currentFilter === 'schoolType'">
          <view 
            class="filter-option" 
            v-for="school in schoolTypeOptions" 
            :key="school.value"
            :class="{ active: selectedSchoolType === school.value }"
            @click="selectSchoolType(school)"
          >
            <text class="option-text">{{ school.label }}</text>
          </view>
        </view>

        <view class="filter-options" v-if="currentFilter === 'salary'">
          <view 
            class="filter-option" 
            v-for="sal in salaryOptions" 
            :key="sal.value"
            :class="{ active: selectedSalary === sal.value }"
            @click="selectSalary(sal)"
          >
            <text class="option-text">{{ sal.label }}</text>
          </view>
        </view>

        <view class="filter-options" v-if="currentFilter === 'location'">
          <!-- 使用home-index样式的城市选择器 -->
          <view class="city-selector-content">
            <!-- 省份列表 -->
            <view class="province-list">
              <view
                :class="['province-item', {active: selectedProvince === ''}]"
                @click="selectAllProvince"
              >
                全部
              </view>
              <view
                v-for="loc in locationOptions.filter(item => item.children)"
                :key="loc.value"
                :class="['province-item', {active: selectedProvince === loc.value}]"
                @click="selectProvince(loc.value)"
              >{{ loc.label }}</view>
            </view>
            
            <!-- 城市列表 -->
            <view class="city-list">
              <view
                :class="['city-item', {active: selectedLocation === ''}]"
                @click="selectAllCities"
              >
                <text>全部城市</text>
              </view>
              <view
                v-for="city in getCurrentCities()"
                :key="city.value"
                :class="['city-item', {active: selectedLocation === city.value}]"
                @click="selectLocation(city)"
              >
                <text>{{ city.label }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>

      <view class="filter-actions">
        <button class="confirm-btn" @click="applyFilters">
          <text class="btn-text">确定</text>
        </button>
      </view>
    </view>

    <!-- 底部按钮区域 -->
    <view class="search-footer">
      <button class="reset-btn" @click="resetAllFilters">
        <text class="btn-text">重置筛选条件</text>
      </button>
      <button class="search-btn" @click="updateActiveFilters(); searchResumes()">
        <text class="btn-text">搜索简历 ({{ getTotalCount() }})</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      hasSearched: false,
      showFilterPanel: false,
      currentFilter: '',
      selectedExperience: '',
      selectedEducation: '',
      selectedSchoolType: '',
      selectedSalary: '',
      selectedLocation: '',
      activeFilters: {
        experience: false,
        education: false,
        schoolType: false,
        salary: false,
        location: false
      },
      experienceOptions: [
        { label: '不限', value: '' },
        { label: '应届生', value: '0' },
        { label: '1-3年', value: '1-3' },
        { label: '3-5年', value: '3-5' },
        { label: '5-10年', value: '5-10' },
        { label: '10年以上', value: '10+' }
      ],
      educationOptions: [
        { label: '不限', value: '' },
        { label: '大专', value: '大专' },
        { label: '本科', value: '本科' },
        { label: '硕士', value: '硕士' },
        { label: '博士', value: '博士' }
      ],
      schoolTypeOptions: [
        { label: '不限', value: '' },
        { label: '985', value: '985' },
        { label: '211', value: '211' },
        { label: '普通院校', value: 'normal' }
      ],
      salaryOptions: [
        { label: '不限', value: '' },
        { label: '0-5k', value: '0-5' },
        { label: '5-10k', value: '5-10' },
        { label: '10-20k', value: '10-20' },
        { label: '20-30k', value: '20-30' },
        { label: '30k以上', value: '30+' }
      ],
      locationOptions: [
        { label: '不限', value: '' },
        { 
          label: '北京市', 
          value: 'beijing',
          children: [
            { label: '东城区', value: 'beijing-dongcheng' },
            { label: '西城区', value: 'beijing-xicheng' },
            { label: '朝阳区', value: 'beijing-chaoyang' },
            { label: '海淀区', value: 'beijing-haidian' },
            { label: '丰台区', value: 'beijing-fengtai' },
            { label: '石景山区', value: 'beijing-shijingshan' }
          ]
        },
        { 
          label: '上海市', 
          value: 'shanghai',
          children: [
            { label: '黄浦区', value: 'shanghai-huangpu' },
            { label: '徐汇区', value: 'shanghai-xuhui' },
            { label: '长宁区', value: 'shanghai-changning' },
            { label: '静安区', value: 'shanghai-jingan' },
            { label: '普陀区', value: 'shanghai-putuo' },
            { label: '浦东新区', value: 'shanghai-pudong' }
          ]
        },
        { 
          label: '广东省', 
          value: 'guangdong',
          children: [
            { label: '广州市', value: 'guangzhou' },
            { label: '深圳市', value: 'shenzhen' },
            { label: '珠海市', value: 'zhuhai' },
            { label: '佛山市', value: 'foshan' },
            { label: '东莞市', value: 'dongguan' },
            { label: '中山市', value: 'zhongshan' }
          ]
        },
        { 
          label: '浙江省', 
          value: 'zhejiang',
          children: [
            { label: '杭州市', value: 'hangzhou' },
            { label: '宁波市', value: 'ningbo' },
            { label: '温州市', value: 'wenzhou' },
            { label: '嘉兴市', value: 'jiaxing' },
            { label: '湖州市', value: 'huzhou' },
            { label: '绍兴市', value: 'shaoxing' }
          ]
        },
        { 
          label: '江苏省', 
          value: 'jiangsu',
          children: [
            { label: '南京市', value: 'nanjing' },
            { label: '无锡市', value: 'wuxi' },
            { label: '徐州市', value: 'xuzhou' },
            { label: '常州市', value: 'changzhou' },
            { label: '苏州市', value: 'suzhou' },
            { label: '南通市', value: 'nantong' }
          ]
        },
        { 
          label: '四川省', 
          value: 'sichuan',
          children: [
            { label: '成都市', value: 'chengdu' },
            { label: '自贡市', value: 'zigong' },
            { label: '攀枝花市', value: 'panzhihua' },
            { label: '泸州市', value: 'luzhou' },
            { label: '德阳市', value: 'deyang' },
            { label: '绵阳市', value: 'mianyang' }
          ]
        }
      ],
      selectedProvince: ''
    }
  },
  computed: {
    selectedFilters() {
      const filters = {}
      if (this.selectedExperience) filters.experience = this.getFilterLabel('experience', this.selectedExperience)
      if (this.selectedEducation) filters.education = this.getFilterLabel('education', this.selectedEducation)
      if (this.selectedSchoolType) filters.schoolType = this.getFilterLabel('schoolType', this.selectedSchoolType)
      if (this.selectedSalary) filters.salary = this.getFilterLabel('salary', this.selectedSalary)
      if (this.selectedLocation) filters.location = this.getFilterLabel('location', this.selectedLocation)
      return filters
    },
    hasSelectedFilters() {
      return Object.keys(this.selectedFilters).length > 0
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    toggleFilter(filter) {
      if (this.currentFilter === filter && this.showFilterPanel) {
        this.showFilterPanel = false
        this.currentFilter = ''
      } else {
        this.currentFilter = filter
        this.showFilterPanel = true
      }
    },
    closeFilterPanel() {
      this.showFilterPanel = false
      this.currentFilter = ''
      // 重置省份选择状态
      this.selectedProvince = ''
    },
    getFilterTitle(filter) {
      const filterTitles = {
        experience: '工作经验',
        education: '学历要求',
        schoolType: '学校类型',
        salary: '薪资范围',
        location: '工作地点'
      }
      return filterTitles[filter] || ''
    },
    updateActiveFilters() {
      this.activeFilters.experience = !!this.selectedExperience
      this.activeFilters.education = !!this.selectedEducation
      this.activeFilters.schoolType = !!this.selectedSchoolType
      this.activeFilters.salary = !!this.selectedSalary
      this.activeFilters.location = !!this.selectedLocation
    },
    getFilterLabel(type, value) {
      const options = {
        experience: this.experienceOptions,
        education: this.educationOptions,
        schoolType: this.schoolTypeOptions,
        salary: this.salaryOptions,
        location: this.locationOptions
      }
      const option = options[type]?.find(item => item.value === value)
      return option?.label || ''
    },
    getFilterValue(type) {
      const values = {
        experience: this.selectedExperience,
        education: this.selectedEducation,
        schoolType: this.selectedSchoolType,
        salary: this.selectedSalary,
        location: this.selectedLocation
      }
      return this.getFilterLabel(type, values[type])
    },
    selectExperience(exp) {
      this.selectedExperience = exp.value
    },
    selectEducation(edu) {
      this.selectedEducation = edu.value
    },
    selectSchoolType(school) {
      this.selectedSchoolType = school.value
    },
    selectSalary(sal) {
      this.selectedSalary = sal.value
    },
    selectAllProvince() {
      this.selectedProvince = ''
    },
    selectProvince(provinceValue) {
      this.selectedProvince = provinceValue
    },
    selectAllCities() {
      this.selectedLocation = ''
      this.activeFilters.location = false
    },
    selectLocation(loc) {
      this.selectedLocation = loc.value
      this.activeFilters.location = !!loc.value
    },
    getCurrentCities() {
      if (!this.selectedProvince) {
        // 显示所有城市
        const allCities = []
        this.locationOptions.forEach(province => {
          if (province.children) {
            allCities.push(...province.children)
          }
        })
        return allCities
      } else {
        // 显示选中省份的城市
        const province = this.locationOptions.find(item => item.value === this.selectedProvince)
        return province ? province.children : []
      }
    },
    removeFilter(key) {
      switch(key) {
        case 'experience':
          this.selectedExperience = ''
          this.activeFilters.experience = false
          break
        case 'education':
          this.selectedEducation = ''
          this.activeFilters.education = false
          break
        case 'schoolType':
          this.selectedSchoolType = ''
          this.activeFilters.schoolType = false
          break
        case 'salary':
          this.selectedSalary = ''
          this.activeFilters.salary = false
          break
        case 'location':
          this.selectedLocation = ''
          this.activeFilters.location = false
          break
      }
    },
    resetAllFilters() {
      // 重置所有筛选条件
      this.selectedExperience = ''
      this.selectedEducation = ''
      this.selectedSchoolType = ''
      this.selectedSalary = ''
      this.selectedLocation = ''
      
      // 重置活跃筛选状态
      for (let key in this.activeFilters) {
        this.activeFilters[key] = false
      }
      
      // 关闭筛选面板
      this.showFilterPanel = false
      this.currentFilter = ''
      
      // 重置省份选择状态
      this.selectedProvince = ''
      
      // 重置搜索状态
      this.hasSearched = false
      
      // 显示重置成功提示
      uni.showToast({
        title: '已重置所有筛选条件',
        icon: 'success',
        duration: 1500
      })
    },
    resetFilter(filterType) {
      switch(filterType) {
        case 'experience':
          this.selectedExperience = ''
          break
        case 'education':
          this.selectedEducation = ''
          break
        case 'schoolType':
          this.selectedSchoolType = ''
          break
        case 'salary':
          this.selectedSalary = ''
          break
        case 'location':
          this.selectedLocation = ''
          break
      }
      this.updateActiveFilters()
    },
    applyFilters() {
      this.updateActiveFilters()
      this.closeFilterPanel()
    },
    getTotalCount() {
      // 模拟获取筛选结果数量
      let count = 1250
      if (this.hasSelectedFilters) {
        count = Math.floor(count * (0.3 + Math.random() * 0.4))
      }
      return count
    },
    searchResumes() {
      const filters = {
        experience: this.selectedExperience || null,
        education: this.selectedEducation || null,
        schoolType: this.selectedSchoolType || null,
        salary: this.selectedSalary || null,
        location: this.selectedLocation || null
      }
      
      const activeFilters = {}
      Object.keys(filters).forEach(key => {
        if (filters[key]) {
          activeFilters[key] = filters[key]
        }
      })
      
      uni.navigateTo({
        url: `/pages/recruit/resume-results?filters=${encodeURIComponent(JSON.stringify(activeFilters))}`
      })
    }
  }
}
</script>

<style scoped>
/* 全局变量 */
:root {
  --primary-color: #05A273;
  --primary-light: #04C2A4;
  --primary-dark: #048A69;
  --background: #f5f7fa;
  --card-bg: #ffffff;
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-muted: #999999;
  --border-light: #f0f0f0;
  --border-normal: #e0e0e0;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --safe-area-bottom: env(safe-area-inset-bottom);
}

.search-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
  position: relative;
  overflow-x: hidden;
  padding-bottom: calc(280rpx + var(--safe-area-bottom));
}

/* 顶部导航 */
.header {
  position: relative;
  background: transparent;
  padding: 110rpx 36rpx 40rpx;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-button {
  position: absolute;
  top: 98rpx;
  left: 36rpx;
  z-index: 10;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  border: 1rpx solid rgba(16, 185, 129, 0.2);
  transition: all 0.3s ease;
}

.back-button:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.3);
}

.back-button:active {
  transform: scale(0.9) translateY(2rpx);
  background: rgba(16, 185, 129, 0.3);
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  filter: brightness(0);
}

.back-icon:active {
  opacity: 1;
}

.page-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #333333;
}


/* 搜索统计 */
.search-stats {
  margin: 32rpx 24rpx 16rpx;
  padding: 20rpx 24rpx;
  background: rgba(5, 162, 115, 0.08);
  border-radius: 20rpx;
  border-left: 4rpx solid #05A273;
  border: 1rpx solid rgba(5, 162, 115, 0.15);
}

.stats-text {
  font-size: 26rpx;
  color: #333333;
  font-weight: 500;
}

/* 分隔线组标题 */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  position: relative;
}

.section-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.section-title {
  font-size: 32rpx;
  color: var(--text-primary);
  font-weight: 600;
  flex: 1;
}



/* 筛选卡片（现代化） */
.filter-card {
  margin: 24rpx;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 32rpx;
  padding: 32rpx 24rpx;
  box-shadow:
    0 15rpx 50rpx rgba(5, 162, 115, 0.1),
    0 8rpx 25rpx rgba(5, 162, 115, 0.06),
    0 2rpx 8rpx rgba(0, 0, 0, 0.04),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
  border: 2rpx solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20rpx);
  position: relative;
  z-index: 5;
}

.filter-grid {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.filter-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 24rpx 20rpx;
  background: rgba(102, 126, 234, 0.04);
  border-radius: 20rpx;
  border: 2rpx solid rgba(102, 126, 234, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.filter-item:hover {
  background: rgba(5, 162, 115, 0.08);
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 12rpx rgba(5, 162, 115, 0.15);
}

.filter-item.active {
  background: rgba(5, 162, 115, 0.1);
  border-color: rgba(5, 162, 115, 0.3);
  box-shadow: 0 6rpx 16rpx rgba(5, 162, 115, 0.2);
}

.filter-label {
  font-size: 24rpx;
  color: #475569;
  margin-right: 12rpx;
  flex-shrink: 0;
  font-weight: 500;
}

.filter-value {
  flex: 1;
  font-size: 26rpx;
  color: #1e293b;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arrow-icon {
  font-size: 20rpx;
  color: #64748b;
  margin-left: 8rpx;
  font-weight: bold;
  transition: all 0.3s ease;
}

.filter-item.active .arrow-icon {
  color: #333333;
  transform: rotate(180deg);
}

.location-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.location-tag {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  background: #f8f9fa;
  border-radius: 24rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.location-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(5, 162, 115, 0.1), transparent);
  transition: left 0.5s ease;
}

.location-tag:active::before {
  left: 100%;
}

.location-tag.active {
  background: rgba(5, 162, 115, 0.1);
  border-color: var(--primary-color);
  color: var(--primary-dark);
}

/* 移除更多按钮样式（不再使用） */

.tag-text {
  font-size: 26rpx;
  font-weight: 500;
}

.more-icon {
  font-size: 24rpx;
  margin-left: 8rpx;
  font-weight: bold;
}

/* 学校类型筛选 */
.school-section {
  margin: 0 32rpx 32rpx;
  padding: 32rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: var(--shadow-sm);
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 24rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  border-radius: 24rpx;
  transition: all 0.3s ease;
  cursor: pointer;
}

.radio-item:active {
  transform: scale(0.95);
}

.radio-item.active {
  background: rgba(5, 162, 115, 0.1);
}

.radio-circle {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  border: 3rpx solid var(--border-normal);
  margin-right: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.radio-item.active .radio-circle {
  border-color: var(--primary-color);
}

.radio-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: var(--primary-color);
  transform: scale(0);
  animation: radioScale 0.3s ease forwards;
}

@keyframes radioScale {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.radio-label {
  font-size: 28rpx;
  color: var(--text-primary);
  font-weight: 500;
}



/* 遮罩层 */
.filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4rpx);
}

.filter-overlay.show {
  opacity: 1;
}

/* 筛选面板 */
.filter-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 999;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-top-left-radius: 32rpx;
  border-top-right-radius: 32rpx;
  max-height: calc(80vh - var(--safe-area-bottom));
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.15);
  padding-bottom: var(--safe-area-bottom);
}

.filter-panel--show {
  transform: translateY(0);
}

/* 筛选面板标题 */
.filter-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 32rpx 32rpx;
  border-bottom: 1rpx solid var(--border-light);
  position: relative;
}

.filter-header::before {
  content: '';
  position: absolute;
  top: 16rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 6rpx;
  background: var(--border-normal);
  border-radius: 3rpx;
}

.filter-title {
  font-size: 32rpx;
  color: var(--text-primary);
  font-weight: 600;
}

.filter-close {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56rpx;
  height: 56rpx;
  border-radius: 28rpx;
  background: #f5f5f5;
  transition: all 0.2s ease;
  z-index: 10;
}

.filter-close:active {
  background: #e8e8e8;
  transform: scale(0.9);
}

.close-icon {
  font-size: 28rpx;
  color: var(--text-secondary);
}

/* 筛选内容 */
.filter-content {
  flex: 1;
  overflow-y: auto;
}

.filter-options {
  padding: 8rpx 0;
}

.filter-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1rpx solid #f8f8f8;
  transition: all 0.2s ease;
  position: relative;
}

.filter-option::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6rpx;
  background: #05a273;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.filter-option.active::before {
  transform: scaleY(1);
}

.filter-option:active {
  background: #f8f9fa;
}

.filter-option.active {
  background: rgba(5, 162, 115, 0.05);
}

.filter-option.active .option-text {
  color: #05a273;
  font-weight: 600;
}

.option-text {
  font-size: 28rpx;
  color: var(--text-primary);
  transition: all 0.2s ease;
  flex: 1;
}

/* 城市选择器样式（与home-index一致） */
.city-selector-content {
  display: flex;
  flex-direction: row;
  min-height: 300rpx;
  max-height: calc(60vh - 96rpx);
  overflow-y: auto;
}

.province-list {
  width: 180rpx;
  border-right: 1rpx solid #f0f0f0;
  overflow-y: auto;
  background: #f7f8fa;
}

.province-item {
  padding: 24rpx 0;
  text-align: center;
  color: #666;
  cursor: pointer;
  font-size: 28rpx;
  transition: background 0.2s, color 0.2s;
}

.province-item.active {
  color: #05a273;
  font-weight: 700;
  background: #fff;
}

.city-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #fff;
}

.city-item {
  flex-direction: row;
  place-items: center;
  padding: 24rpx 0;
  text-align: center;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  transition: background 0.2s, color 0.2s;
}

.city-item.active {
  color: #05a273;
  font-weight: 700;
  background: rgba(5, 162, 115, 0.1);
}



/* 筛选操作按钮 */
.filter-actions {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
  padding: 32rpx;
  border-top: 1rpx solid var(--border-light);
  background: #fafbfc;
  padding-bottom: calc(32rpx + var(--safe-area-bottom));
  justify-content: center;
}

.reset-btn, .confirm-btn {
  height: 88rpx;
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: 600;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.confirm-btn {
  width: 200rpx;
}

.reset-btn {
  background: #f5f5f5;
  color: var(--text-secondary);
}

.reset-btn:active {
  background: #e8e8e8;
  transform: scale(0.98);
}

.confirm-btn {
  background: linear-gradient(135deg, #05A273 0%, #04C2A4 100%);
  color: #fff;
  box-shadow: 0 4rpx 16rpx rgba(5, 162, 115, 0.3);
}

.confirm-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.confirm-btn:active::before {
  left: 100%;
}

.confirm-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 8rpx rgba(5, 162, 115, 0.4);
}

.btn-text {
  font-size: 30rpx;
  font-weight: 600;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5rpx;
}

/* 底部按钮区域 */
.search-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28rpx 32rpx calc(44rpx + var(--safe-area-bottom));
  z-index: 20;
  background: linear-gradient(135deg, #f8fffe 0%, #f0f9f4 50%, #e8f5e8 100%);
  display: flex;
  flex-direction: row;
  gap: 28rpx;
  box-shadow: 
    0 -12rpx 40rpx rgba(0, 0, 0, 0.06),
    0 -6rpx 20rpx rgba(0, 0, 0, 0.04),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20rpx);
}

.search-footer .reset-btn {
  flex: 1;
  height: 100rpx;
  border-radius: 50rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  color: #6c757d;
  font-size: 30rpx;
  font-weight: 600;
  border: 1rpx solid rgba(108, 117, 125, 0.2);
  box-shadow: 
    0 8rpx 32rpx rgba(0, 0, 0, 0.06),
    0 4rpx 16rpx rgba(0, 0, 0, 0.04),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.8),
    inset 0 -1rpx 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10rpx);
}

.search-footer .reset-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.search-footer .reset-btn:active::before {
  left: 100%;
}

.search-footer .reset-btn:active {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  transform: scale(0.96) translateY(1rpx);
  box-shadow: 
    0 4rpx 16rpx rgba(0, 0, 0, 0.08),
    0 2rpx 8rpx rgba(0, 0, 0, 0.06),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.6),
    inset 0 -1rpx 0 rgba(0, 0, 0, 0.1);
}

.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 2;
  height: 100rpx;
  background: linear-gradient(135deg, #05A273 0%, #04C2A4 50%, #00D4AA 100%);
  color: #fff;
  border-radius: 50rpx;
  font-size: 30rpx;
  font-weight: 700;
  border: none;
  box-shadow:
    0 12rpx 40rpx rgba(5, 162, 115, 0.35),
    0 8rpx 24rpx rgba(5, 162, 115, 0.25),
    0 4rpx 12rpx rgba(5, 162, 115, 0.15),
    inset 0 2rpx 0 rgba(255, 255, 255, 0.3),
    inset 0 -2rpx 0 rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.search-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.search-btn:active::before {
  left: 100%;
}

.search-btn:active {
  transform: scale(0.96) translateY(1rpx);
  box-shadow:
    0 8rpx 24rpx rgba(5, 162, 115, 0.45),
    0 4rpx 16rpx rgba(5, 162, 115, 0.35),
    0 2rpx 8rpx rgba(5, 162, 115, 0.25),
    inset 0 2rpx 0 rgba(255, 255, 255, 0.4),
    inset 0 -2rpx 0 rgba(0, 0, 0, 0.15);
}



/* 响应式设计计 */
@media (max-width: 750rpx) {
  .filter-grid {
    grid-template-columns: 1fr;
  }
  
  .location-tags {
    gap: 12rpx;
  }
  
  .radio-group {
    flex-direction: column;
    gap: 16rpx;
  }
}

/* 加载动画 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6rpx;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3rpx;
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3rpx;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}
</style>